<template>
	<view class="padd">
		<view class="pjWrap"> 
			<!-- 商品信息 --> 
			<view class="pjProInfo hasFlex">
				<block v-if="fromPage == 'groupOrder'">
					<view class="proImg">
						<image class="samePar" src="../../../static/images/groupService/ttIimg.png"></image>
					</view>
					<view class="proInfoCon">
						<view class="proTit multiEllip clamp2">{{orderInfo.objName}}</view>
						<view class="address">服务项目:{{orderInfo.serviceName}}</view>
					</view>
				</block>
				<block v-else-if="fromPage == 'zxOrder' || fromPage == 'zxOrderDet'">
					<view class="proImg">
						<image class="samePar" :src="getCloudFilePath(orderInfo.zxsImg)"></image>
					</view>
					<view class="proInfoCon">
						<view class="proTit">{{orderInfo.zxsName}}咨询师</view>
						<view class="address">咨询方式:{{orderInfo.zxTypeTxt}}</view>
						<view class="address">¥{{orderInfo.zxPrice}}/{{orderInfo.zxMinute}}分钟</view>
					</view>
				</block>
			</view>
			<block v-if="fromPage == 'zxOrder' || fromPage == 'zxOrderDet' || fromPage == 'groupOrder'">
				<!-- 评分 -->
				<view class="pjScore hasFlex">
					<view class="scoreTit">{{rateNumTxt}}</view>
					<view>
						<htz-rate v-model="rateNum" :size="66" :type="0" @change="change" style="vertical-align: middle;"></htz-rate> 
						<text class="scoreTxt">{{msgData[rateNum]}}</text>
					</view>
				</view>
			</block>
			<!-- 编辑评价textarea -->
			<view class="editTxt hasFlex">
				<view class="iconfont icon-edit"></view>
				<view class="txtarea">
					<textarea class="area" v-model="pjContent" :placeholder="placeholder" maxlength="200"></textarea>
				</view>
			</view>
		</view>
		<button class="comBtn" :disabled="isDisabledFlag" @tap="goComment">提交评价</button>
	</view>
</template>

<script>
	import { addZxsOrderPj,addGroupOrderPj } from '@/api/xlzx/index'
	export default {
		data(){
			return{
				rateNum:0,
				pjContent:'',
				msgData: ['', '非常差', '差', '一般', '好', '非常好'],
				placeholder:'',
				isDisabledFlag:false,
				fromPage:'',
				rateNumTxt:'',
				orderInfo:[],
				orderId:'',
				resId:'',
				isNeedRateFlag:false
			}
		},
		onLoad(options){
			//groupOrder zxOrder zxOrderDet resOrder resOrderDet cpOrder cpOrderDet 心理测评评价
			var currTit = '';
			this.fromPage = options.fromPage;
			if(this.fromPage == 'groupOrder'){
				this.isNeedRateFlag = true;
				this.orderId = options.serviceId;
				this.orderInfo = uni.getStorageSync('groupField');
				currTit = '团体订单评价';
				this.rateNumTxt = '服务项目评分';
				this.placeholder = '请输入您对此次团体活动的服务机构的真实评价,您的评价会对其他用户很有帮助哦(200字内)~';
				
			}else if(this.fromPage == 'zxOrder'||this.fromPage == 'zxOrderDet'){
				this.isNeedRateFlag = true;
				this.orderId = options.orderId;
				this.orderInfo = uni.getStorageSync('zxsInfoField');
				currTit = '咨询订单评价';
				this.rateNumTxt = '咨询师评分';
				this.placeholder = '请输入您对此次咨询的真实评价,您的评价会对其他用户很有帮助哦(200字内)~';
			}else if(this.fromPage == 'cpOrder'||this.fromPage == 'cpOrderDet'){
				this.isNeedRateFlag = true;
				this.orderId = options.orderId;
				this.orderInfo = uni.getStorageSync('zxsInfoField');
				currTit = '测评订单评价';
				this.rateNumTxt = '测评试题评分';
				this.placeholder = '请输入您对此次测评的真实评价,您的评价会对其他用户很有帮助哦(200字内)~';
			}
			uni.setNavigationBarTitle({
				title:currTit
			})
		},
		methods:{
			goComment(){
				if(this.rateNum == 0 && this.isNeedRateFlag){
					this.util.showToast('请选择评分');
				}else if(this.pjContent == ''){
					this.util.showToast('请输入评价内容');
				}else{
					uni.showLoading({title:'提交评价中...', mask: true });
					if(this.fromPage == 'zxOrder' || this.fromPage == 'zxOrderDet'){
						var field = {orderId:this.orderId,sUserId:this.orderInfo.zxsUserId,pjContent:this.pjContent,pjScore:this.rateNum};
						this.isDisabledFlag = true;
						addZxsOrderPj(field).then(res=>{
							this.util.showToastSuc('提交成功');
							let pages = getCurrentPages();
							let prevPage = pages[pages.length - 2];
							prevPage.$vm.isRefreshFlag = true;
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},1500)
						}).catch(err=>{
							//console.log(err)
							this.isDisabledFlag = false;
						});
					}else if(this.fromPage == 'groupOrder'){
						var field = {id:this.orderId,pjContent:this.pjContent,pjScore:this.rateNum}
						this.isDisabledFlag = true;
						addGroupOrderPj(field).then(res=>{
							this.util.showToastSuc('提交成功');
							let pages = getCurrentPages();
							let prevPage = pages[pages.length - 2];
							prevPage.$vm.isRefreshFlag = true;
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},1500)
						}).catch(err=>{
							console.log(err)
							this.isDisabledFlag = false;
						});
					}
				}
			},
			change(index,clickOpt){
				this.rateNum = index;
			}
		}
	}
</script>

<style lang='scss' scoped>
	page{
		background: $pss-bg-primary;
	}
	.pjWrap{
		background: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 20rpx;
		.pjProInfo{
			justify-content: space-between;
			margin-bottom: 20rpx;
			.proImg{
				width: 120rpx;
				height: 120rpx;
				flex-shrink: 0;
				.samePar{
					border-radius: 8rpx;
				}
			}
			.proInfoCon{
				width: 79%;
				min-height: 120rpx;
				.proTit{
					font-size: $font-size30;
					color: $pss-text-color3;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				.address{
					font-size: $font-size26;
					color: $pss-text-color8;
				}
			}
		}
		/* 评分 */
		.pjScore{
			height: 80rpx;
			align-items: center;
			.scoreTit{
				font-size: $font-size28;
				color: $pss-text-color8;
				margin:10rpx 10rpx 0 0;
			}
			.scoreTxt{
				font-size: $font-size26;
				color: $pss-text-color8;
			}
		}
		/* textarea */
		.editTxt{
			margin-top: 20rpx;
			.icon-edit{
				font-size: $font-size30;
				color: $pss-text-colora;
				margin-right: 10rpx;
				flex-shrink: 0;
			}
			.txtarea{
				width: 96%;
				.area{
					font-size: $font-size28;
					color: $pss-text-color3;
				}
			}
		}
	}
	.comBtn{
		background: #ffa510;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 50rpx;
		margin-top: 100rpx;
	}
</style>